<template>
  <div>
    <div style="margin: 3px;">
      <h1 style="font-size: 30px;text-align: center;">{{site.siteName}}</h1>
      <el-button style="float: left;" @click="typeBtn" type="primary">站点类别价目表</el-button>
    </div>

    <!-- 弹窗 （类别价目信息）-->
    <el-dialog  title="类别回收价目信息" :visible.sync="showKinds" width="54%" >
     <el-table ref="siteKinds" :data="siteKinds"  style="width: 100%;" >
       <el-table-column  type="index"  width="80">
       </el-table-column>
       <el-table-column prop="typeName" label="物品名称" width="150">
       </el-table-column>
       <el-table-column width="210">
         <template slot="header" slot-scope="scope"></template>
         <template slot-scope="scope"><el-image :src="scope.row.typeImage"></el-image></template>
       </el-table-column>
       <el-table-column prop="typePrice" label="类别价格" width="150">
       </el-table-column>
       <el-table-column prop="unit" label="价格单位" width="150">
       </el-table-column>
     </el-table>
    </el-dialog>
    <!-- 表单对象 -->
    <div style="border: 1px silver solid;width: 1200px;height: 500px;margin-top: 42px;">
      <el-form ref="site" disabled :model="site" label-width="100px">
        <el-col :span="11">
          <el-form-item></el-form-item>

          <el-form-item label="站点状态">
            <el-input v-model="site.siteState==0?'正常':site.siteState==1?'禁用':'删除'" ></el-input>
          </el-form-item>
          <el-form-item label="站点评分">
            <el-input v-model="site.siteStore"></el-input>
          </el-form-item>
          <el-form-item label="支付账号">
            <el-input v-model="site.payAccount"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item></el-form-item>
          <el-form-item label="站点电话">
            <el-input v-model="site.sitePhone"></el-input>
          </el-form-item>
          <el-form-item label="站点地址">
            <el-input v-model="site.siteAddress"></el-input>
          </el-form-item>
          <el-form-item label="营业时间">
            <el-time-picker value-format='HH:mm:ss' v-model="site.siteStartTime" :picker-options="{
                selectableRange: '00:00:00 - 23:59:59'
              }" placeholder="开始时间">
            </el-time-picker>
            --------
            <el-time-picker value-format='HH:mm:ss' v-model="site.siteEndTime" :picker-options="{
                selectableRange: '00:00:00 - 23:59:59'
              }" placeholder="结束时间">
            </el-time-picker>
          </el-form-item>
        </el-col>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    name: "RecycleSelectSite",
    data() {
      return {
        site:{},
        showKinds:false,
        siteKinds:[]
      }
    },
    methods: {
      //类别展示按钮
      typeBtn(){
         this.showKinds = true
         this.$http.post("/site/siteKindsPrice/recycleSelect.recycle").then(resp=>{
           if(resp.data.code==200){
              this.siteKinds=resp.data.data
           }else{
             this.siteKinds=[]
           }
         })
      },

      //展示站点信息
      showSiteInfo() {
        this.$http.post("/site/siteInfo/recycleSelectOne.recycle").then(resp => {
          this.site = resp.data.data
        })
      }
    },
    created() {
      this.showSiteInfo()
    }

  }
</script>

<style>
</style>
